BLOG - MIKA

Créer votre première page web

1) Introduction

Pour commencer à créer une page web html il va nous falloir un éditeur de text. Vous pouvez soit utiliser l’éditeur de text de votre système d’exploitation ou alors en télécharger un sur le net, il y en a tellement que je ne serais lequel vous conseiller.

Moi personnellement j’utilise « Atom », c’est un éditeur avec couleur syntaxique, l’autocomplétion et on peux aussi avoir un serveur html, trés pratique pour avoir un visuel en temps réel lors du codage. Si cet éditeur de text vous intérèsse allez ICI pour le télécharger, vous y trouverez aussi toutes les manipulations pour installer les addons dont je vous ai parlé plus haut.

2) Première page html

Ouvrez votre éditeur de text et placer ce bout de code qui est la base minimum d’un document html

<!DOCTYPE html>
	<html lang="fr" dir="ltr">
		<head>
			<meta charset="utf-8">
			<title></title>
		</head>	
		
		<body>
		</body>
	</html>

Une fois ce code copier dans votre page cliqué sur « fichier », « Enregistrer-sous », mettez un nom sans espace avec l’extenssion « .html » (ex: PremierPage.html) et cliquer sur « Ok ».

Maintenant petite explication sur les balises principales d’une page html

  • <!DOCTYPE html> Balise pour dire au navigateur que c’est une page html5
  • <html lang="fr" dir="ltr"> et </html> Balises où se trouvera tout le contenu de notre page html

  • <head> et </head> Balises où se trouve toutes les métas, les Links, les scripts, etc.. C’est tout ce qui se charge avant notre page html.

    • <meta charset="utf-8"> Balise qui permet d’écrire du text avec les accents sans devoir mettre de caractère spécial.
    • <title> et </title> Balises pour le titre de la page qui est situé en haut dans l’onglet du navigateur.
  • <body> et </body> Balises où on mettra notre code qui s’affichera sur la page web. C’est donc à cet endroit qu’on passera le plus de temps.

Vous pouvez lancer votre première page en cliquant sur le fichier créer plus haut, bon vous aurez une page blanche pour le moment vu que nous avons rien écrit entre les balises <body> </body>. Maintenant remplissons un peu notre page.

<!DOCTYPE html>
	<html lang="fr" dir="ltr">
		<head>
			<meta charset="utf-8">
			<title>Première Page html</title>
		</head>	
		<body>
			Ceci est ma première page html.
		</body>
	</html>

Vous enregistrez et vous actualisez votre page web. Normalement vous devriez avoir ça

premiere Page

Voila vous avez créé votre première page web avec du contenu. Maintenant il ne vous reste plus qu’a écrire votre page html. Je vais vous mettre quelque balises utiles pour commencer.

3) Quelques balises

  • Ecrire des commentaires dans son code est très important pour s’y retrouver quand le code est très long et il ne se voit pas sur la page web
	<!-- Ceci est un commentaire sur une ligne -->
	
	<!--
		Ceci est un 
		commentaire sur
		plusieurs lignes
	-->
  • Ecrire un titre de différente grosseur du plus gros au plus petit
	<h1>Titre 1</h1>
	<h2>Titre 2</h2>
	<h3>Titre 3</h3>
	<h4>Titre 4</h4>
	<h5>Titre 5</h5>
	<h6>Titre 6</h6>
  • <b> et </b> Text en gras
  • <i>et </i> Text en italique
  • Les tableaux
<table>                   	   <!-- Creation du tableau -->

  <!-- Ce premier bloc permet de créer les en-têtes mais n'est pas obligatoires -->
 	 <tr>                      <!-- Création d'une ligne dans le tableau -->
   	 	<th>text ici</th>      <!-- Création d'un en-tête de tableau -->
   	 	<th>text ici</th>
 	 </tr>                     <!-- Fermeture de la ligne du tableau -->
  <!-- Fin des en-têtes-->

  <!-- Bloc pour créer une ligne avec plusieurs colonnes -->
  
  	<tr>                       <!-- Création d'une ligne dans le tableau -->
    	<td>text ici</td>      <!-- Création d'une colonne -->
   		<td>text ici</td>
 	</tr>                      <!-- Fermeture de la ligne du tableau -->
  <!-- Fin du bloc -->
  
</table>                       <!-- Fermeture du tableau -->
  • Les listes
	<ul>
		<li>premier</li>
		<li>deuxième</li>
		<li>troisième</li>
		<li>quatrième</li>
		<li>etc...</li>
	</ul>
  • Les formulaires
<!-- method : 'POST' ou 'GET' et action : lien vers la page à envoyer les données -->
	<form method='' action=''>
	
		le contenu du formulaire
		
	</form>
  • <div>et </div> Balises pour créer un bloc de données

Voilà quelques balises utilent pour commencer, dans le prochain article je vous montrerez comment mettre en place la mise en page avec un fichier « .css » car la niveau esthétique c’est pas le top… Je vous remercie d’avoir lu cet article jusqu’au bout et je vous dis a bientôt pour un prochain article.

BYE

Retour